<template>
  <div class="lease_box">
    <div class="left_box">
      <div>
        <div class="tj">年度合同退租总数</div>
        <div class="text">{{ props.data.count }}</div>
      </div>
      <div>
        <div class="tj">年度合同退租总面积</div>
        <div class="text">{{ props.data.area }}</div>
      </div>
    </div>
    <div id="leaseStatistics"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, watchEffect } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const initChart = () => {
  var chartDom = document.getElementById("leaseStatistics");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },

    legend: {
      right: "5%",
      top: "5%",
      textStyle: {
        color: "rgba(255, 255, 255)",
      },
    },

    xAxis: [
      {
        type: "category",
        axisLabel: {
          //interval设置成 0 强制显示所有标签
          interval: 0,
        },
        boundaryGap: false,
        data: props.data.list.map((item) => item.name),
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.6)", // 坐标轴线线的颜色

            // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
    
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "rgba(255, 255, 255, 0.6)", // 坐标轴线线的颜色
            // 坐标轴线线宽
            type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
        },
        splitLine: {
        //网格线
        show: false, //关闭网格线
      },
      },
    ],
    grid: {
      top: "10%",
      left: "3%",
      right: "5%",
      bottom: "5%",
      containLabel: true,
    },
    series: [
     
      {
        name: "去年",
        type: "line",
        stack: "Total",
        label: {
          show: false,
          position: "top",
        },
        symbol: 'none',

        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        lineStyle: {
          width: 2, //外边线宽度
          color: "#7FFCFF", //外边线颜色
        },
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(63, 196, 174, 0.4)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(63, 196, 174, 0)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        data: props.data.list.map((item) => item.value),
      },
      {
        name: "今年",
        type: "line",
        stack: "Total",
        areaStyle: {},
        symbol: 'none',

        emphasis: {
          focus: "series",
        },
        lineStyle: {
          width: 2, //外边线宽度
          color: "#FCA53F", //外边线颜色
        },
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(63, 196, 174, 0.4)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(252, 165, 63, 0)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        data: props.data.list2.map((item) => item.value),
      },
    ],
  };

  option && myChart.setOption(option);
};

onMounted(() => {});
watchEffect(() => {

  if (props.data.list) {
    initChart();
  }
});
</script>

<style scoped>
.lease_box {
  width: 100%;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 10px;
  box-sizing: border-box;
}

.left_box {
  width: 130px;
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.left_box div {
  width: 130px;
  height: 91px;
  border-radius: 4px;
  opacity: 1;

  background: rgba(25, 192, 255, 0.0118);

  box-sizing: border-box;
  border: 1px solid rgba(25, 192, 255, 0.4);
}

.left_box div .tj {
  width: 100%;
  height: 38px;
  background-color: rgba(25, 240, 255, 0.4);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.left_box div .text {
  width: 100%;
  height: 53px;
  font-family: 思源黑体;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  letter-spacing: 0em;

  color: #ffffff;
}

#leaseStatistics {
  width: 100%;
  height: 100%;
}
</style>
